<template>
    <div>
        <!--查询表单-->
        <div>
            <el-form :inline="true" :model="searchFormData" class="demo-form-inline">
                <el-form-item label="订单号">
                    <el-input v-model="searchFormData.orderNo" size="mini" placeholder="订单号"/>
                </el-form-item>
                <el-form-item label="客户id">
                    <el-select v-model="searchFormData.saleCustomerId" placeholder="套餐名称" size="mini">
                        <el-option v-for="item in customers" :label="item.label"
                                   :value="item.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="通道编号">
                    <el-select v-model="searchFormData.channelCode" placeholder="通道编号" size="mini">
                        <el-option v-for="item in channels" :label="item.label"
                                   :value="item.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="套餐编号">
                    <el-select v-model="searchFormData.comboCode" placeholder="套餐编号" size="mini">
                        <el-option v-for="item in combos" :label="item.label"
                                   :value="item.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单类型">
                    <el-select v-model="searchFormData.type" placeholder="订单类型" size="mini">
                        <el-option v-for="item in orderTypes" :label="item.label"
                                   :value="item.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间">
                    <el-date-picker
                        v-model="searchFormData.timeArr"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="mini">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchSubmit" size="mini">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--表格-->
        <el-table :data="tableData" border height="500px" max-height="500px" id="orderList">
            <el-table-column fixed prop="startId" label="订单号" align="center"/>
            <el-table-column prop="endId" label="客户" align="center"/>
            <el-table-column prop="cardCount" label="通道" align="center"/>
            <el-table-column prop="customer" label="套餐" align="center"/>
            <el-table-column prop="address" label="套餐单价" align="center"/>
            <el-table-column prop="status" label="卡数量" align="center"/>
            <el-table-column prop="operator" label="交易金额" align="center"/>
            <el-table-column prop="outputTime" label="利润" align="center"/>
            <el-table-column prop="outputTime" label="利润" align="center"/>
            <el-table-column prop="outputTime" label="日期" align="center"/>
        </el-table>
        <!--翻页-->
        <div>
            <pageHelper :current-page="page" :total="total" @sizeChange="handleSizeChange"
                        @currentChange="handleCurrentChange" class="my_pagenation"/>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import {mytips, getTimeByTimeArray} from '@/module/tools';
    import pageHelper from '../common/pageHelper'
    import {Loading} from 'element-ui';

    export default {
        name: 'orderList',
        components: {pageHelper, Loading},
        data() {
            return {
                page: 1,
                size: 10,
                total: 0,
                formLabelWidth: '80px',
                tableData: [{
                    startId: 1001,
                    endId: 2000,
                    cardCount: 1000,
                    customer: "王涛",
                    address: '广东深圳',
                    status: '已发货',
                    operator: '王涛涛',
                    outputTime: '2018-11-7 16:32:23'
                }],
                searchFormData: {
                    orderNo: null,
                    saleCustomerId: null,
                    channelCode: null,
                    comboCode: null,
                    type: null,
                    timeArr: null
                },
                channels: [{label: "通道1", value: 1},
                    {label: "通道2", value: 2},
                    {label: "通道3", value: 3}],
                customers: [{label: "客户1", value: 1},
                    {label: "客户2", value: 2},
                    {label: "客户3", value: 3}],
                orderTypes: [{label: "售出", value: 'sale'},
                    {label: "复机", value: 'open'}],
                combos:
                    [{label: "套餐1", value: 1},
                        {label: "套餐2", value: 2},
                        {label: "套餐3", value: 3}],
            };
        },
        methods: {
            getData: function (page, size) {
                this.page = page || 1;
                this.size = size || 10;
                let beginTime = getTimeByTimeArray(this.searchFormData.timeArr, 0);
                let endTime = getTimeByTimeArray(this.searchFormData.timeArr, 1);
                let loading = this.$loading(this.options);
                axios({
                    method: 'get',
                    url: API_PATH + '/cardOrder/query',
                    dataType: 'json',
                    params: {
                        orderNO: this.searchFormData.orderNo,
                        saleCustomerId: this.searchFormData.saleCustomerId,
                        channelCode: this.searchFormData.channelCode,
                        comboCode: this.searchFormData.comboCode,
                        type: this.searchFormData.type,
                        beginTime: beginTime,
                        endTime: endTime,
                        page: this.page,
                        size: this.size,
                    }
                }).then(
                    res => {
                        if (res.data.code == 0) {
                            this.tableData = res.data.list;
                            this.total = res.data.total;
                        }
                    },
                    xhr => {
                    }
                )
                this.$nextTick(() => {
                    console.log('关闭loading');
                    loading.close();
                })
            },
            searchSubmit() {
                this.getData(this.page, this.size);
            },
            handleSizeChange(size) {
                this.size = size;
                this.getData(this.page, this.size);
            },
            handleCurrentChange(page) {
                this.page = page;
                this.getData(this.page, this.size);
            }

        },
        mounted() {
            this.options = {
                text: '加载中...',
                background: 'rgba(0,0,0,0,1)',
                target: document.getElementById("orderList")
            }
        }

    }
</script>

<style scoped>
    .express-ctr-item {
        margin-top: 12px;
    }

    .express-ctr-item .express-ctr-label {
        display: inline-block;
        width: 100px;
        text-align: right;
        line-height: 32px;
    }

    .test {
        width: 100px;
    }

    .file-btn {
        background-color: gray;
        width: 200px;
    }
</style>

